import Arrow from "@assets/arrow.png";
import BackgroundImg from "@assets/bg02.jpg";
import Label_1 from "@assets/label_1.png";
import Label_2 from "@assets/label_2.png";
import SmallDragon from "@assets/small_dragon.png";
import GetButton from "@assets/unlock_button.png";

import BaseBackground from "@plugin/BaseBackground";
import EnhanceUseNavigate from "@plugin/EnhanceUseNavigate";
import React, { Component } from "react";
import styles from "./index.module.scss";

import roleAudio1 from "@assets/audio/1110 kinder greeting vo 称呼_1 亲爱的妈妈，祝您.wav";
import roleAudio2 from "@assets/audio/1110 kinder greeting vo 称呼_2 亲爱的爸爸，祝您.wav";
import roleAudio3 from "@assets/audio/1110 kinder greeting vo 称呼_3 亲爱的宝贝，祝你.wav";
import {
  default as roleAudio4,
  default as roleAudio5,
} from "@assets/audio/1110 kinder greeting vo 称呼_4 亲爱的，祝你.wav";
import roleAudio6 from "@assets/audio/1110 kinder greeting vo 称呼_5 亲爱的老板，祝您.wav";

import tagAudio1 from "@assets/audio/1110 kinder greeting vo 祝福语_1 升职加薪步步高，钱多事少心情好.wav";
import tagAudio2 from "@assets/audio/1110 kinder greeting vo 祝福语_2 龙年学业步步升 ，考试轻松get满分.wav";
import tagAudio3 from "@assets/audio/1110 kinder greeting vo 祝福语_3 财神爷爷笑哈哈，红包满满乐开花.wav";
import tagAudio4 from "@assets/audio/1110 kinder greeting vo 祝福语_4 日日夜夜多喜乐，岁岁年年常安康.wav";
import tagAudio5 from "@assets/audio/1110 kinder greeting vo 祝福语_5 愿你平安欢喜，今天、明天、每一天.wav";
import tagAudio6 from "@assets/audio/1110 kinder greeting vo 祝福语_6 ⻰年吃好喝好，快乐⽇⼦不倒.wav";

import { complexVideo } from "@api";
import { getChannel } from "../../../utils";
import { CampaignIds } from "../../../utils/ha.common";

const roles = [
  { id: "1", name: "妈妈", audio: roleAudio1 },
  { id: "2", name: "爸爸", audio: roleAudio2 },
  { id: "3", name: "孩子", audio: roleAudio3 },
  { id: "4", name: "朋友", audio: roleAudio4 },
  { id: "5", name: "同事", audio: roleAudio5 },
  { id: "6", name: "老板", audio: roleAudio6 },
];

const tags = [
  { id: "1", name: "天选打工人", audio: tagAudio1 },
  { id: "2", name: "奋进学习仔", audio: tagAudio2 },
  { id: "3", name: "快乐小财迷", audio: tagAudio3 },
  { id: "4", name: "养生小达人", audio: tagAudio4 },
  { id: "5", name: "银发弄潮儿", audio: tagAudio5 },
  { id: "6", name: "干饭美食家", audio: tagAudio6 },
];

let audio1 = "";
let audio2 = "";

class Index extends Component {
  constructor(props) {
    super(props);

    this.state = {
      selectRole: "1",
      selectedTags: "1",
      showRoleText: "",
      audioContent: [roles[0]["audio"], ""],
    };
  }

  componentDidMount() {
    window._ha("send", "action", "cny_activity1_blessingtypepage_view", {
      campaign_id: CampaignIds.activity1,
      channel: getChannel(),
    });
  }

  handlerSelectRole = (e) => {
    if (audio1) {
      audio1?.pause();
      audio2?.pause();
    }
    const { audioContent } = this.state;
    this.setState(
      {
        selectRole: e.target.value,
        audioContent: [
          this.getRoleInfo(e.target.value)["audio"],
          audioContent[1],
        ],
      },
      () => {
        // this.playAudio();
      }
    );
  };

  handlerSelectTag = (item) => {
    if (audio1) {
      audio1?.pause();
      audio2?.pause();
    }
    const { audioContent } = this.state;
    this.setState(
      {
        selectedTags: item["id"],
        audioContent: [audioContent[0], item["audio"]],
      },
      () => {
        // this.playAudio();
      }
    );
  };

  playAudio = () => {
    const { audioContent } = this.state;
    if (audioContent[0] && audioContent[1]) {
      audio1 = new Audio(audioContent[0]);
      audio2 = new Audio(audioContent[1]);
      audio1.play();
      audio1.addEventListener("ended", () => {
        audio2.play();
      });
    }
  };

  getRoleInfo = (id) => {
    if (id) {
      const res = roles.filter((item) => id === item["id"]);
      return res[0];
    } else {
      return { id: "", name: "", audio: "" };
    }
  };

  // getTagInfo = (id) => {
  //   if (id) {
  //     const res = tags.filter(item => id === item['id'])
  //     return res[0]
  //   } else {
  //     return { id: '', name: '', audio: '' }
  //   }
  // }

  handlerClick = () => {
    const { selectRole, selectedTags } = this.state;

    complexVideo({
      text: "",
      v1: selectRole,
      v2: selectedTags,
    }).then((res) => {
      if (res["state"] === "ok") {
        sessionStorage.setItem("TASK_ID", res["data"]["id"]);
        this.props.navigate("/activity_loading_1");
      }
    });

    window._ha(
      "send",
      "action",
      "cny_activity1_blessingtypepage_makevideo_click",
      {
        campaign_id: CampaignIds.activity1,
        channel: getChannel(),
        text: `${roles.find((i) => i.id === selectRole).name}, ${
          tags.find((i) => i.id === selectedTags).name
        }`,
      }
    );
  };

  render() {
    const { selectRole, selectedTags } = this.state;
    return (
      <BaseBackground backgroundImage={BackgroundImg} showFlag={true}>
        <div className={styles.form_box}>
          <div className={styles.form_item}>
            <img src={Label_1} className={styles.label_1} alt="" />
            <div className={styles.select_item}>
              <div className={styles.select_content}>
                {this.getRoleInfo(selectRole)["name"]}
              </div>
              <select
                className={`${styles.input} ${styles.hide_select}`}
                value={selectRole}
                onChange={this.handlerSelectRole}
              >
                {roles.map((item) => (
                  <option key={`option_${item["id"]}`} value={item.id}>
                    {item.name}
                  </option>
                ))}
              </select>
              <img src={Arrow} className={styles.arrow} alt="" />
            </div>
          </div>

          <div className={styles.select_button_box}>
            <img src={Label_2} className={styles.label_2} alt="" />
            <div className={styles.select_item_box}>
              {tags.map((item) => (
                <div
                  key={`tag_${item["id"]}`}
                  className={`${styles.item} ${
                    item["id"] === selectedTags ? styles.selected_item : ""
                  }`}
                  onClick={() => this.handlerSelectTag(item)}
                >
                  {item.name}
                </div>
              ))}
            </div>
          </div>

          <div>
            <img src={SmallDragon} className={styles.small_dragon} alt="" />
          </div>
          <div>
            <img
              onClick={this.handlerClick}
              src={GetButton}
              className={styles.get_button}
              alt=""
            />
          </div>
        </div>

        <div
          className={styles.change_version}
          onClick={() => {
            this.props.navigate("/activity_create_2");
          }}
        >
          切换版本
        </div>
      </BaseBackground>
    );
  }
}

export default EnhanceUseNavigate(Index);
